<!-- src/components/LoginForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <label for="username">用户名:</label>
    <input
        type="text"
        id="username"
        v-model="username"
        placeholder="请输入用户名..."
        @focus="$emit('onUsernameFocus')"
    />
    <label for="password">密码:</label>
    <input
        type="password"
        id="password"
        v-model="password"
        placeholder="请输入密码..."
        @focus="$emit('onPasswordFocus')"
    />

    <!-- 登录按钮 -->
    <BaseButton
        variant="primary"
        size="medium"
        :disabled="isSubmitting"
        aria-label="登录按钮"
        @clickButton="handleSubmit"
    >
      登录
    </BaseButton>

    <!-- 注册按钮 -->
    <BaseButton
        variant="secondary"
        size="medium"
        outline
        aria-label="注册按钮"
        @clickButton="navigateToRegister"
    >
      注册
    </BaseButton>
  </form>
</template>

<script setup>
import { ref } from "vue";
import BaseButton from "@/components/BaseButton.vue"; // 导入 BaseButton 组件
import { useRouter } from 'vue-router';
import axios from '@/axios'; // 导入 axios
import { useAuthStore } from '@/store/authStore.js'  // 引入 Pinia store
import { useUserStore} from "@/store/user.js";

// 定义响应式数据
const username = ref("");
const password = ref("");
const isSubmitting = ref(false); // 控制按钮禁用状态
const router = useRouter();
const authStore = useAuthStore()
const userStore = useUserStore()

// 点击表单提交
const handleSubmit = async () => {
  isSubmitting.value = true; // 禁用按钮，防止重复提交

  // 校验输入
  if (!username.value || !password.value) {
    alert("请输入用户名和密码！");
    isSubmitting.value = false;
    return;
  }

  // 准备要发送的数据
  const loginData = {
    username: username.value,
    password: password.value,
  };

  try {
    // 发送登录请求
    const response = await axios.post('/user/login', loginData, {
      headers: {
        'Content-Type': 'application/json'
      }
    }); // 修改为后端实际的登录接口
    if (response.data.code === 0) {
      const token = response.data.data  // 获取返回的 Bearer Token
      authStore.setToken(token)  // 存储 token 到 Pinia store

      const response1 = await axios.get("/user/userInfo")
      if (response1.data.code === 0) {
        const userInfo = response1.data.data
        console.log("userInfo:", userInfo)
        userStore.setUserInfo(userInfo)
      }

      console.log('登录成功:', token)

      // 登录成功后，导航到主页
      await router.push('/home');
    } else {
      alert('登录失败:'+response.data.message)
    }

  } catch (error) {
    console.log(error)
  } finally {
    isSubmitting.value = false; // 恢复按钮状态
  }
};

// 点击注册按钮时触发
const navigateToRegister = () => {
  router.push('/register');
};
</script>

<style scoped>
/* 与之前相同的样式 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

form {
  width: 23.75em;
  padding: 3em 1.5em;
  background-color: #86db7691;
  position: relative;
  transform: translate(-50%);
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.5em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

form label {
  display: block;
  margin-bottom: 0.2em;
  font-weight: 600;
  color: #2e0d30;
}

form input {
  font-size: 0.95em;
  font-weight: 400;
  color: #3f3554;
  padding: 0.3em;
  border: none;
  border-bottom: 0.12em solid #3f3554;
  background-color: rgba(26, 188, 156, 0.29);
  outline: none;
}

form input:focus {
  border-color: #f4c531;
}

form input:not(:last-child) {
  margin-bottom: 0.9em;
}

/* 调整 BaseButton 的上边距 */
form .base-button + .base-button {
  margin-top: 0.5em;
}

/* 其他装饰性样式保持不变 */
/* ... (保持与您之前相同的 .ear-l, .ear-r, .panda-face 等样式) */
</style>
